<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="author" content="" />
        <meta name="description" content="COVID19 SE" />
        <title>COVID19 - Software Engineering Study</title>

        <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
        <!-- Font Awesome icons (free version)-->
        <script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script>
        <!-- Google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet" type="text/css" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link rel="stylesheet" type="text/css" href="notebook/inspector.css">
        <link href="css/styles.css" rel="stylesheet" />
        <link href="css/my-css.css" rel="stylesheet" />
        <script src="js/lda-models.js"></script>
    </head>
    <body id="page-top">
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" 
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent" style="margin-top: 190px;">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#graphs">Datavis</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#topics">Topics</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#urls">URLs</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
                </ul>
            </div>
        </nav>
        <!-- Page Content-->
        <div class="container-fluid p-0">
            <!-- About-->
            <section class="resume-section" id="about">
                <div class="resume-section-content">
                    <h2 class="mb-0"><span class="text-primary">Software Development During COVID-19 Pandemic</span></h2>
                    <h3 class="mb-0">An Analysis of Stack Overflow and GitHub</h3>
                    <div class="subheading mb-5">Pedro Almir Oliveira, Pedro Santos Neto, Gleison Silva, Irvayne Ibiapina, Werney Luz, Rossana M. C. Andrade</div>
                    <p class="lead mb-5">The new coronavirus became a severe health issue for the world. This situation has motivated studies of different areas to combat this pandemic. In computer science, we point out data visualization projects to follow the disease evolution, machine learning to estimate the pandemic behavior, computer vision processing radiologic images for early detection of the disease, among others. Most of these projects are stored in version control systems, and there are discussions about them in Question & Answer websites. In this work, we conducted a Mining Software Repository to analyze the data of a large number of questions and projects aiming to find trends that could help software development researchers and practitioners to fight the coronavirus. We analyzed 1,190 questions from Stack Overflow and Data Science Q&A and 60,352 GitHub projects. We identified a correlation between the questions and projects throughout the pandemic. The main questions about coronavirus are how-to, related to web scraping and data visualization, using Python, JavaScript, and R. The most recurrent GitHub projects are machine learning projects, using JavaScript, Python, and Java. We realized that many people, including a large number of beginners, are trying to contribute in a someway to tackle the problem. In recent weeks, the number of new projects and questions is decreasing, showing that we are going to stabilize. Finally, we also present a website with our findings, facilitating analysis of everything that has been done, and serving as a support for new solutions that will help in the fight against coronavirus.</p>
                </div>
            </section>
            <hr class="m-0" />
            <!-- Graphs-->
            <section class="resume-section" id="graphs">
                <div class="resume-section-content">
                    <h2 class="mb-5">Datavis</h2>
                    <div class="d-flex flex-column flex-md-row justify-content-between mb-10">
                        <div class="flex-grow-1">
                            <h3 class="mb-4">Distribution by Status</h3>
                            <!-- <p>Bring to the table win-win survival strategies to ensure proactive domination. </p> -->
                            <img src="report/fig1_painel1.png">
                        </div>
                    </div>
                    <div class="d-flex flex-column flex-md-row justify-content-between mb-10">
                        <div class="flex-grow-1">
                            <h3 class="mb-4">Distribution of Questions and Projects Related to the COVID-19</h3>
                            <!-- <p>Bring to the table win-win survival strategies to ensure proactive domination. </p> -->
                            <img src="report/fig_result1.png">
                        </div>
                    </div>
                    <div class="d-flex flex-column flex-md-row justify-content-between mb-10">
                        <div class="flex-grow-1">
                            <h3 class="mb-4">Number of Questions</h3>
                            <!-- <p>Bring to the table win-win survival strategies to ensure proactive domination. </p> -->
                            <img src="report/fig_result2.png">
                        </div>
                    </div>
                    <div class="d-flex flex-column flex-md-row justify-content-between mb-10">
                        <div class="flex-grow-1">
                            <h3 class="mb-0">Bubble chart</h3>
                            <!--  <p>Presenting the number of Stack Overflow Questions correlated with three dimensions: Question Type, Related Solution and Platform</p> -->
                            <img src="report/fig_result4.png" style="width: 100%;">
                        </div>
                    </div>
                    <div class="d-flex flex-column flex-md-row justify-content-between mb-10">
                        <div class="flex-grow-1">
                            <h3 class="mb-4">Most recurrent programming languages</h3>
                            <!-- <p>Bring to the table win-win survival strategies to ensure proactive domination. </p> -->
                            <img src="report/fig_result3_v2.png">
                        </div>
                    </div>
                    <div class="d-flex flex-column flex-md-row justify-content-between mb-10">
                        <div class="flex-grow-1">
                            <h3 class="mb-4">Most discussed topics</h3>
                            <!-- <p>Bring to the table win-win survival strategies to ensure proactive domination. </p> -->
                            <img src="report/fig_result5_v2.png">
                        </div>
                    </div>
                    <div class="d-flex flex-column flex-md-row justify-content-between mb-10">
                        <div class="flex-grow-1">
                            <h3 class="mb-0">Scatter plots</h3>
                            <p>Correlating A) number of forks and pull requests, and B) number of forks and disk usage</p>
                            <img src="report/fig_result6.png">
                        </div>
                    </div>
                    <div class="d-flex flex-column flex-md-row justify-content-between mb-10">
                        <div class="flex-grow-1">
                            <h3 class="mb-4">Correlation between collaborators and commits</h3>
                            <!-- <p>Bring to the table win-win survival strategies to ensure proactive domination. </p> -->
                            <img src="report/fig_result8.png">
                        </div>
                    </div>
                </div>
            </section>
            <hr class="m-0" />
            <!-- Topics-->
            <section class="resume-section pb-0" id="topics">
                <div class="resume-section-content">
                    <h2 class="mb-5">Topic Modeling</h2>
                    <h3 class="mb-0">Topics considering Stack Overflow data</h3>
                    <p>LDA model plotted using the LDAvis method.</p>
                    <div id="so_topic_container" class="d-flex flex-column flex-md-row justify-content-between" style="width: 90%;">
                        <div id="ldavis_el127140123553488232566432981"></div>
                        <script type="text/javascript">
                            function LDAvis_load_lib(url, callback){
                                var s = document.createElement('script');
                                s.src = url;
                                s.async = true;
                                s.onreadystatechange = s.onload = callback;
                                s.onerror = function(){console.warn("failed to load library " + url);};
                                document.getElementsByTagName("head")[0].appendChild(s);
                            }

                            if(typeof(LDAvis) !== "undefined"){
                                // already loaded: just create the visualization
                                !function(LDAvis){
                                    new LDAvis("#" + "ldavis_el127140123553488232566432981", ldavis_el127140123553488232566432981_data, $('#so_topic_container').width());
                                }(LDAvis);
                            }else{
                                // require.js not available: dynamically load d3 & LDAvis
                                LDAvis_load_lib("https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js", function(){
                                    LDAvis_load_lib("js/ldavis.v1.0.0.js", function(){
                                            new LDAvis("#" + "ldavis_el127140123553488232566432981", ldavis_el127140123553488232566432981_data, $('#so_topic_container').width());
                                        })
                                    });
                            }
                        </script>
                    </div>
                    <h3 class="mb-0">Topics considering Github data</h3>
                    <p>LDA model plotted using the LDAvis method.</p>
                    <div id="git_topic_container" class="d-flex flex-column flex-md-row justify-content-between" style="width: 90%;">
                        <div id="ldavis_el1231402936947005441324151833"></div>
                        <script type="text/javascript">
                            function LDAvis_load_lib(url, callback){
                                var s = document.createElement('script');
                                s.src = url;
                                s.async = true;
                                s.onreadystatechange = s.onload = callback;
                                s.onerror = function(){console.warn("failed to load library " + url);};
                                document.getElementsByTagName("head")[0].appendChild(s);
                            }

                            if(typeof(LDAvis) !== "undefined"){
                                // already loaded: just create the visualization
                                !function(LDAvis){
                                    new LDAvis("#" + "ldavis_el1231402936947005441324151833", ldavis_el1231402936947005441324151833_data, $('#git_topic_container').width());
                                }(LDAvis);
                            }else{
                                // require.js not available: dynamically load d3 & LDAvis
                                LDAvis_load_lib("https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js", function(){
                                    LDAvis_load_lib("js/ldavis.v1.0.0.js", function(){
                                            new LDAvis("#" + "ldavis_el1231402936947005441324151833", ldavis_el1231402936947005441324151833_data, $('#git_topic_container').width());
                                        })
                                    });
                            }
                        </script>
                    </div>
                </div>
            </section>
            <hr class="m-0" />
            <!-- URLS-->
            <section class="resume-section" id="urls">
                <div class="resume-section-content">
                    <h2 id="urlsLabelID" class="mb-0">URLs Related with COVID-19</h2>
                    <div class="subheading mb-3">They were classified as Application, Data repository, Code repository, and Other</div>
                    <div id="treeContainer"></div>
                </div>
            </section>
            <hr class="m-0" />
            <!-- Contact-->
            <section class="resume-section" id="contact">
                <div class="resume-section-content">
                    <h2 class="mb-0">Contact</h2>
                    <div class="subheading mb-3">You can contact us using one of the following emails.</div>
                    <ul class="fa-ul mb-0">
                        <li>
                            <span class="fa-li"><a href="https://orcid.org/0000-0002-3067-3076" target="_blank"><img src="report/ORCIDiD_icon16x16.png"></a></span>
                            Pedro Almir Oliveira: <a href="mailto:pedromartins@great.ufc.br">pedromartins@great.ufc.br</a>
                        </li>
                        <li>
                            <span class="fa-li"><a href="https://orcid.org/0000-0002-1554-8445" target="_blank"><img src="report/ORCIDiD_icon16x16.png"></a></span>
                            Pedro Santos Neto: <a href="mailto:pasn@ufpi.edu.br">pasn@ufpi.edu.br</a>
                        </li>
                        <li>
                            <span class="fa-li"><a href="https://orcid.org/0000-0002-7128-7526" target="_blank"><img src="report/ORCIDiD_icon16x16.png"></a></span>
                            Gleison Silva: <a href="mailto:gleison@infoway-pi.com.br">gleison@infoway-pi.com.br</a>
                        </li>
                        <li>
                            <span class="fa-li"><a href="https://orcid.org/0000-0003-1308-172X" target="_blank"><img src="report/ORCIDiD_icon16x16.png"></a></span>
                            Irvayne Ibiapina: <a href="mailto:irvaynematheus@gmail.com">irvaynematheus@gmail.com</a>
                        </li>
                        <li>
                            <span class="fa-li"><a href="https://orcid.org/0000-0003-4198-8169" target="_blank"><img src="report/ORCIDiD_icon16x16.png"></a></span>
                            Werney L. Lira: <a href="mailto:pasn@ufpi.edu.br">werney@ifpi.edu.br</a>
                        </li>
                        <li>
                            <span class="fa-li"><a href="https://orcid.org/0000-0002-0186-2994" target="_blank"><img src="report/ORCIDiD_icon16x16.png"></a></span>
                            Rossana M. C. Andrade: <a href="mailto:rossana@great.ufc.br">rossana@great.ufc.br</a>
                        </li>
                    </ul>
                </div>
            </section>
            <script type="module">
                // Load the Observable runtime and inspector.
                import {Runtime, Library, Inspector} from "./notebook/runtime.js";
            
                // Your notebook, compiled as an ES module.
                import notebook from "./notebook/5d6dd9906d17e745@603.js";
      
                // Load the notebook, observing its cells with a default Inspector
                // that simply renders the value of each cell into the provided DOM node.
                var modules = ['tooltip', 'showTooltip', 'hideTooltip', 'scrapModel']
                new Runtime().module(notebook, name => {
                  if(modules.includes(name)) {
                    return {
                      pending() {},
                      fulfilled(value) { 
                        console.log("Done " + name + "!")
                      }
                    };
                  }
                });
              </script>
        </div>
        <!-- Bootstrap core JS-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
        <!-- Third party plugin JS-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
        <!-- Core theme JS-->
        <script src="js/scripts.js"></script>
    </body>
</html>
